<template>
  <div class="mark-six-box">
    <div class="popup">
      <div class="pop">
        <div class="popup-lf">
          <div
            class="li large"
            v-for="(item, index) in gameTemplateData"
            :class="currentGameType === index ? 'actives' : ''"
            @click="setCurrentGameType(index)"
            :key="index"
          >
            {{ item.playTypeName }}
          </div>
        </div>
        <div class="popup-content">
          <Handicap @update-template="fetchGameTemplateData"/>
          <div class="tips">单期最高派奖{{ numberToChinese(allGame?.[currentGame]?.maxReward) }}万</div>
          <!-- 游戏类型 -->
          <component ref="gameRef" :is="getGameComponentTag" :renderData="getCurrentGameData"></component>
        </div>
      </div>

      <!-- 下注 -->
      <investPopup @betNow="betNow($refs)" @updateInvestList="clearInvestList($refs)" />
    </div>
  </div>
</template>

<script>
import OddsBtn from './odds-btn.vue'
import TMZ_GAME from './xglhc-tm-game.vue'
import TX_GAME from './xglhc-tx-game.vue'
import TMSB_GAME from './xglhc-tmsb-game.vue'
import ZM_GAME from './xglhc-zm-game.vue'
import LM_GAME from './xglhc-lm-game.vue'
import LX_GAME from './xglhc-lx-game.vue'
import ZXBZ_GAME from './xglhc-zxbz-game.vue'
import investPopup from '@/components/invest-popup.vue'
import { mapState, mapActions, mapGetters } from 'pinia'
import { numberToChinese } from '@/utils'
import { useGameStore } from '@/stores/game'
import { useXglhcStore } from '@/stores/xglhc'
import { $utils } from '@/utils'
import Handicap from '@/components/Handicap.vue'

export default {
  name: 'markSix',
  components: {
    OddsBtn,
    investPopup,
    TMZ_GAME,
    TX_GAME,
    TMSB_GAME,
    ZM_GAME,
    LM_GAME,
    LX_GAME,
    ZXBZ_GAME,
    Handicap,
  },
  data() {
    return {
      playTemplateData: null, // 游戏渲染数据
      currentMenuIndex: 0, //当前游戏索引
      currentPlayTypeIndex: 0, //当前游戏玩法类型
      showRecord: false, //显示历史记录列表
      showMenu: false, //菜单弹窗
      show: false, //游戏弹窗

      value: '',
      showsh: 0,
      actives: -1,
      activeti: 0,
      activete: 0,
      popactives: 0,
      withdraw: false,
      showsho: false,
      btnactive: 1,
      showovers: true,
      touchs: false,
      activeout: 0,
      activeouts: 0,
      activeinners: 0,
      digit: '',
    }
  },
  mounted() {
    this.init()
  },

  computed: {
    ...mapState(useXglhcStore, {
      currentGameType: (state) => state.currentGameType,
      gameTemplateData: (state) => state.gameTemplateData,
    }),
    ...mapState(useGameStore, {
      currentGame: (state) => state.currentGame,
      drawingStatus: (state) => state.drawingStatus,
    }),
    ...mapGetters(useGameStore, ['allGame']),
    ...mapGetters(useXglhcStore, ['getCurrentGameData', 'getGameComponentTag', 'getPlayTypeCodeList']),

    // ...mapState("invest", {
    //   showEditMoneyPopup: state => state.showEditMoneyPopup,
    //   investMoneyOpts: state => state.investMoneyOpts,
    // 	}),
    haveData() {
      return this.showMenu && !$utils.isEmpty(this.gameTemplateData)
    },
  },

  methods: {
    ...mapActions(useXglhcStore, ['init', 'setCurrentGameType', 'betNow', 'clearInvestList', 'fetchGameTemplateData']),

    numberToChinese,

    // 打开下注弹窗
    open() {
      this.show = true
      if ($utils.isEmpty(this.gameTemplateData)) {
        this.fetchGameTemplateData()
      }
    },
  },
}
</script>

<style scoped lang="less">
@import url('./markSix.less');
.mark-six-box {
  .popup {
    position: relative;
    height: 100%;
  }

  .pop {
    height: calc(100% - 110px);
  }

  .popup-content {
    height: 100%;
  }

  :deep(.play-box) {
    height: calc(100% - 40px);
  }

  :deep(.play-odds) {
    max-height: calc(100% - 50px);
  }
}
.tips {
  margin-bottom: 7px;
  font-size: 12px;
  color: rgba(246, 68, 54, 1);
}

.popup-lf {
  max-height: 360px !important;
}
</style>
